<template>
  <div class="header-search-wrap">
    <n-form ref="formRef" v-bind="getFormOptions">
      <template v-for="(item, index) in getFormOptions.info" :key="`${index}-${item.label}`">
        <n-form-item :class="{'hidden-item': index > showItemNum}" :label="item.label">
          <n-input v-if="['input'].includes(item.type) || !item.type" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" />
          <n-select v-if="['select'].includes(item.type)" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @update:value="SelChange($event,item.key)" />
          <n-tree-select v-if="['tree-select'].includes(item.type)" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" />
          <AreaCascader v-if="['area'].includes(item.type)" :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" />
          <n-date-picker v-if="['date'].includes(item.type)" v-model:formatted-value="getFormOptions.form[item.key]" style="width:450px" v-bind="item.props" />
        </n-form-item>
      </template>
      <n-form-item class="form__button">
        <n-button type="primary" @click="handleSearch">
          <n-icon size="18"><SearchIcon /></n-icon>
          查询
        </n-button>
        <n-button @click="handleReset">
          <n-icon size="18"><Refresh /></n-icon>
          重置
        </n-button>
        <n-button
          v-if="showButton"
          type="text"
          @click="showMoreItem"
        >{{ showItemNum === getFormOptions.info.length - 1 ? '收起' : '展开' }}</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script>
import { computed, ref, unref, watch } from 'vue'
import { NForm } from 'naive-ui'
import AreaCascader from '@/components/AreaCascader/index.vue'
import { Search as SearchIcon, Refresh } from '@vicons/ionicons5'
export default {
  name: 'SearchPage',
  components: { AreaCascader, SearchIcon, Refresh },
  props: {
    ...NForm.props,
    info: {
      type: Array,
      default: () => []
    }
  },
  emits: ['search', 'change', 'reset', 'selChange'],
  setup(props, { emit }) {
    const showItemNum = ref(30)
    const len = ref(props.info.length - 1)
    const itemRefs = ref([])
    const showButton = ref(!!(showItemNum.value < len.value))
    const form = ref({})
    /* 初始化搜索表单信息 */
    function initForm() {
      Object.keys(form.value).forEach((key) => {
        const index = unref(props).info.findIndex((item) => item.key === key)
        form.value[key] = (props).info[index].value || null
      })
      itemRefs.value.forEach((item) => {
        item.clearValue()
      })
    }
    /* 地图选择事件 */
    function handleSelect(data) {
      form.value = {
        ...form.value,
        ...data
      }
    }
    const getFormOptions = computed(() => {
      props.info.forEach((item) => {
        // const hasInit = item.init || false
        // const hasKey = Object.keys(form.value).includes(item.key)
        // form.value[item.key] = hasInit ? (item.value || null) : hasKey ? form.value[item.key] : (item.value || null)
        form.value[item.key] = item.value || null
      })
      return {
        form: unref(form),
        labelWidth: 'auto',
        labelPlacement: 'left',
        inline: true,
        info: [...props.info]
      }
    })

    watch(getFormOptions.value.form,
      (value) => {
        emit('change', getFormOptions.value.form)
      })

    function handleSearch() {
      emit('search', getFormOptions.value.form)
    }
    function handleReset() {
      initForm()
      emit('reset', getFormOptions.value.form)
    }

    function setFormValue(params) {
      Object.keys(params).forEach((key) => {
        const index = unref(props).info.findIndex((item) => item.key === key)
        form.value[key] = (props).info[index].value || null
      })
    }

    function showMoreItem() {
      showItemNum.value = showItemNum.value === len.value ? 3 : len.value
    }

    function SelChange(value, key) {
      emit('selChange', { value, key })
    }

    return {
      showItemNum,
      showButton,
      getFormOptions,
      handleSearch,
      handleReset,
      setFormValue,
      handleSelect,
      itemRefs,
      showMoreItem,
      SelChange
    }
  }
}

</script>
<style scoped lang='scss'>
.header-search-wrap{
  // height: 75px;
  line-height: 75px;
  padding-left: 20px;
  background-color: #2A2F46;
}
.n-form{
  flex-wrap: wrap;
}
.n-form-item{
  transition: all 10s;
  .n-input{
    width: 200px;
  }
  .n-select{
    width: 200px;
  }
  .n-tree-select{
    width: 200px;
  }
  .n-cascader{
    width: 200px;
  }
  &.hidden-item{
    display: none;
  }
}
.form__button{
  button+button{
    margin-left: 20px;
  }
}
</style>
